import React, { useMemo, useState } from 'react';
import { Input } from 'antd';
import { INodeComponent } from './type';

// import Editor from '@monaco-editor/react';
import { NodeCodeEditor } from './NodeCodeEditor';
import MyIcon from '@/components/MyIcon';

export const NodeCode: React.FC<INodeComponent> = (props) => {
    const [visible, setVisible] = useState<boolean>(false)
    const data = useMemo(() => {
        return props?.data
    }, [props?.data])

    const onFormChange = (value: any) => {
        if (value && props?.onChange) {
            props.onChange(value)
        }
    }

    const onOpen = () => {
        setVisible(true)
    }

    const onClose = () => {
        setVisible(false)
    }
    return (
        <>
            <Input
                readOnly
                value={props.value ?? ''}
                placeholder={`请填写${data.labelName}`}
                addonAfter={
                    <span onClick={onOpen} style={{ cursor: 'pointer' }}>
                        <MyIcon type='icon-code1' />
                    </span>
                }
            />
            {
                visible && (
                    <NodeCodeEditor
                        onClose={onClose}
                        title={data?.labelName}
                        onFormChange={onFormChange}
                        defaultValue={props?.value ?? []}
                    />
                )
            }
        </>
    )
}

